<template>
  <view class="app-weipinhui-page-main">
    <search006></search006>
    <topNav001 :topNavList="navList"></topNav001>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs, markRaw } from "vue";
import home001 from "./home001.vue";
export default defineComponent({
  name: "",
  props: {},
  components: {
    home001,
  },
  setup() {
    // shallowRef 是 Vue 3 中的一个 API，用于创建一个浅层响应式引用。与 ref 不同，shallowRef 只会对其值的顶层进行响应式处理，而不会递归地将其内部的对象变成响应式的。
    // markRaw 是 Vue 3 中的一个 API，用于标记一个对象，使其永远不会被 Vue 的响应式系统处理。被标记为 markRaw 的对象将完全跳过响应式转换。
    const navList = [
      {
        name: "推荐",
        componentName: markRaw(home001), //单页面引入时需要转递组件本身markRaw标记
      },
      {
        name: "11.11",
        componentName: markRaw(home001), //单页面引入时需要转递组件本身markRaw标记
      },
      {
        name: "女装",
        componentName: markRaw(home001), //单页面引入时需要转递组件本身markRaw标记
      },
      {
        name: "美妆",
        componentName: markRaw(home001), //单页面引入时需要转递组件本身markRaw标记
      },
      {
        name: "运动",
        componentName: markRaw(home001), //单页面引入时需要转递组件本身markRaw标记
      },
      {
        name: "男装",
        componentName: markRaw(home001), //单页面引入时需要转递组件本身markRaw标记
      },
      {
        name: "母婴",
        componentName: markRaw(home001), //单页面引入时需要转递组件本身markRaw标记
      },
    ];
    const data = reactive({});
    return {
      navList,
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.app-weipinhui-page-main {
  position: relative;
  height: 100vh;
  width: 100%;
  //   渐变
  background: linear-gradient(to left, #fbe9fc, #fff, #fdf5fd);
  padding-top: 80rpx;
  box-sizing: border-box;
  /deep/ .menu-content-bottom {
    height: calc(100% - 270rpx);
    .top-tabs-scroll {
      border: none;
      .tabs-text {
        font-size: 32rpx;
        font-weight: 400;
      }
      .slider-style {
        border-radius: 3rpx;
        background: #ff0777;
        width: 50rpx;
        height: 6rpx;
      }
    }
  }
}
</style>
